<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/views/common/resources.jsp" %>   
      
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时定位</title>
    <link href="${basePath}resources/js/common/plugin/zTree/zTreeStyle.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${basePath}resources/js/common/plugin/dhtmlxGrid/dhtmlxgrid.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=15fba5c84d702d936e1c8690eb58f95d&plugin=AMap.Geocoder"></script>
	<script src="${basePath}resources/js/common/plugin/zTree/jquery.ztree.all-3.5.js"></script>
	<%-- <script src="${basePath}resources/js/common/plugin/zTree/search_tree.js"></script> --%>
	<!-- dhtmlxGrid -->
	<script src="${basePath}resources/js/common/plugin/dhtmlxGrid/dhtmlxgrid.js"></script>
	<script src="${basePath}resources/js/common/plugin/My97DatePicker/WdatePicker.js"></script>	
	<script type="text/javascript">
		//地址解析服务器
		var addressPath = '${addressPath}';
	</script>
	<style type="text/css"> 
	.updVehicleBtn{
    	height: 20px;
    	line-height: 20px;
    	background: #e77817;
   		border: none;
    	color: #fff;
    	margin-right: 5px;
	}
	/* #ajax-loading,#mask{display:block;} */
</style> 
</head>
<body class="index" style="overflow:hidden;">
<div class="page">
	<!--左侧菜单  -->
	<div class="slider pa clearfix">
        <%@ include file="/views/common/menu.jsp" %>
    </div> 		
    <div class="main ">
    <!--顶部展示-->
        <%@ include file="/views/common/top.jsp" %> 
        <div class="content pr">
        	<div class="tree-warp fl">
            	<div class="search pr">
                	<input class="search-input" type="text" value="" placeholder="查询业户信息">
                	<a class="search-btn pa" href="javascript:;"><i class="icon icon-search"></i></a>
            	</div>
            	<div class="tree-div">
                	<div class="tree-title clearfix pr">
                    	<div class="tree-title-list all-car fl"><a class="active" href="javascript:;" title="业户信息">业户信息</a></div>
                    	<div class="tree-title-list result fl"><a href="javascript:;" title="车辆信息" >车辆信息</a></div>
                    	<div class="tree-title-line pa"></div>
                	</div>
                	<div class="tree-cont">
                    	<div class="tree tree-cont-list">
                        	<ul class="ztree" id="carTreeList"></ul>
                        	<ul class="ztree dn" id="searchCarTree"></ul>
                    	</div>
                    	<div class="result tree-cont-list dn">
                        	<div id="vehicleSeachTable"></div>
                    	</div>
                	</div>
            	</div>
            	<div class="car-details pr dn">
                	<div class="car-num"></div>
                	<div class="car-btn-hide pa"><span class="icon icon-hide"></span></div>
                	<div class="car-details-tab">
                    	<div class="car-details-title fl">
                        	<ul>
                            	<li class="car-details-title-list active"><a class="db" href="javascript:" title="实时">实时</a></li>
                            	<li class="car-details-title-list"><a class="db" href="javascript:" title="基础">基础</a></li>
                            	<li class="car-details-title-list"><a class="db" href="javascript:" title="司机">司机</a></li>
                        	</ul>
                    	</div>
                    	<div class="car-details-tab-cont fl">
                       		<div class="car-details-cont-list active">
                            	<p class="p1 clearfix"><span class="fl">速度：</span><span class="car-sd car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">里程：</span><span class="car-millage car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">时间：</span><span class="car-time car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">状态：</span><span class="car-staue car-ont textOverFlow"></span></p>
                            	<p class="p1 clearfix"><span class="fl">地址：</span><span class="car-address textOverFlow car-ont" id="caraddress"></span></p>
                            	<!-- <p class="p1"><button class="car-video" >实时视频</button><button class="car-track">视频回放</button><button class="car-trackplay">轨迹回放</button></p> -->
                        	</div>
                        	<div class="car-details-cont-list dn">
                        		<p class="p1 clearfix"><span class="fl">接入平台：</span><span class="platform_name car-ont"></span></p>
                        		<p class="p1 clearfix"><span class="fl">所属行业：</span><span class="trade_kind_name car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">业户：</span><span class="ent_name textOverFlow car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">车牌号：</span><span class="vehicle_no car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">车牌颜色：</span><a class="vehicle_color_name car-ont"></a></p>
                            	<!-- <p class="p1 clearfix"><span>接入平台：</span><span class="car-ont fl"></span></p>
                            	<p class="p1 clearfix"><span class="fl">备注：</span><span class="car-remark fl car-ont"></span></p> -->
                        	</div>
                        	<div class="car-details-cont-list dn">
                        		<p class="p1 clearfix"><span class="fl">当前司机：</span><span class="driverName car-ont"></span></p>
                        		<p class="p1 clearfix"><span class="fl">总时长：</span><span class="totalDriverTime car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">是否疲劳驾驶：</span><span class="tired car-ont"></span></p>
                            	<p class="p1 clearfix dn"><span class="fl">驾驶期间最高时速：</span><span class="max_speed car-ont"></span></p>
                            	<p class="p1 clearfix dn"><span class="fl">驾驶期间超速次数：</span><a class="overspeed_count car-ont"></a></p>
                            	<div class="imgUrl"><img src=""></div>
                        	</div>
                    	</div>
                	</div>
           		</div>
        	</div>
            <div class="monitorDetail">
            	<div class="map pr" style='border:1px solid #d0d0d0'>
	                <div id="mymap"></div>
	                <div class="car-staues clearfix pa">
	            	<!-- <div class="hidetree fl" style="padding:0;"><a class="" id="hideTree" href="javascript:;"></a></div> -->
	                <ul class="car-staues-ul clearfix fl">
	                    <li class="car-staues-list all-staues fl clearfix active">
	                        <a class="db" href="javascript:;">
	                            <div class="staues-icon fl all-icon"></div>
	                            <div class="fl">全部</div>
	                            <div class="fl all-num">0</div>
	                        </a>
	                    </li>
	                    <li class="car-staues-list run-staues fl clearfix">
	                        <a class="db" href="javascript:;">
	                            <div class="staues-icon fl run-icon"></div>
	                            <div class="fl">运行</div>
	                            <div class="fl run-num">0</div>
	                        </a>
	                    </li>
	                    <li class="car-staues-list stop-staues fl clearfix">
	                        <a class="db" href="javascript:;">
	                            <div class="staues-icon fl stop-icon"></div>
	                            <div class="fl">停车</div>
	                            <div class="fl stop-num">0</div>
	                        </a>
	                    </li>
	                    <li class="car-staues-list dropped-staues fl clearfix">
	                        <a class="db" href="javascript:;">
	                            <div class="staues-icon fl dropped-icon"></div>
	                            <div class="fl">掉线</div>
	                            <div class="fl dropped-num">0</div>
	                        </a>
	                    </li>
	                </ul>
	                <!-- <div class="export fl" style="display:none;" id="cancel">
	                    <span class="icon icon-cancel" ></span>
	                </div> -->
	                <!-- <div class="export fl">
	                    <span class="icon icon-export"></span>
	                </div> -->
	            </div>
	                <div id="toolTopDiv">
						<div class="findDiv">
							<!-- <div class="list t11" id="listMap" title="我的地图">&nbsp;</div> -->
							<div class="list t13" id="showMap" title="地物点"></div>
						</div>
						<div class="toolDiv">
							<div class="list t6" title="测距" id="distanceLi">&nbsp;</div>
							<div class="list t8" title="路况" id="mTrafficLi">&nbsp;</div>
							<!-- <div class="list t9" title="全屏" id="mapAllLi">&nbsp;</div> -->
						</div>
					</div>
	            </div>
	            <div id="nResizeMoveDiv" class="butDragMove" style=""></div>
	            <div id="nResizeDiv" class="butDrag" title="拖拽" style=""> <p> 拖拽</p></div>
	            <div class="monitor-detail">
	                 <div id="gridbox" style="height:100%;width:100%;background-color:white;"></div>
	            </div>
            </div>
        </div>
    </div>
</div>

<div class="detail-more pa dn">
    <a class="close-detail-more pa" href="javascript:;" title="关闭"></a>
    <ul>
        <li class="playbackurl"><a href="javascript:;" title="轨迹回放">轨迹回放</a></li>
        <li class="videourl"><a href="javascript:;" title="实时视频">实时视频</a></li>
        <li class="monitorurl"><a href="javascript:;" title="多车定位">多车定位</a></li>
        <li class="multivideourl"><a href="javascript:;" title="多车视频">多车视频</a></li>
        <!-- <li class="shareVehicleurl"><a href="javascript:;" target="_blank" title="分享车辆">分享车辆</a></li> -->
    </ul>
</div>
<%-- <div id="ajax-loading">
    <img id="msgLoadImg" alt="" src="${basePath}resources/images/main/big_loading.gif">
    <span id="msgSpan">正在拼命加载,请稍候!</span>
</div> --%>
<div class="lager-img pa dn">
    <a class="close-pop pa" href="javascript:" title="关闭"></a>
    <div>
        <img id="popimg" src="">
    </div>
</div>

  <div id="vehicleShareModal" class="modal hide fade" tabindex="-1"
			style="width: 400px; left:50%;margin-left:-200px; top: 193px;" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">×</button>
				<h5 id="myModalLabel">分享车辆</h5>
			</div>
			<div class="modal-body">
				<div>
					<span>设置期限：</span>
					<input type="text" id="inputDate" style="width: 150px;height:26px;line-height:26px;" class="query-input Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'%y-%M-%d %h:%m:%s'})">
				</div>
				<div style="margin-top:10px;">
					<span>分享链接：</span><span id="vehicleShareurl_text" style="display: none;"></span><button class="updVehicleBtn" id="copyVehicleUrlBtn">复制链接</button>
					<input id="shareVehicleId" type="text" style="display: none;">
				</div>
			</div>
			<div class="modal-footer">
				<a class="updVehicleBtn closeBtn btn" href="javascript:;" data-dismiss="modal" id="canDelBth"
					aria-hidden="true">关闭</a>
				<a class="updVehicleBtn btn" id="saveVehicleShareDateBtn" href="javascript:;">获取链接</a>
			</div>
		</div>

	<script src="${basePath}resources/js/common/main/HashMap.js"></script>
	<script src="${basePath}resources/js/common/main/base64.js"></script>
	<script src="${basePath}resources/js/common/main/global.js"></script>
	<script src="${basePath}resources/js/common/main/mapToop.js"></script>
	<script src="${basePath}resources/js/common/plugin/clipboard/clipboard.min.js"></script>
	<script src="${basePath}resources/js/common/plugin/clipboard/extend.js"></script>
	<script src="${basePath}resources/js/common/main/nav.js"></script>
	<script src="${basePath}resources/js/business/gis/monitor.js"></script>
</body>
</html>